<template>
    <div>
        <!-- 测评人员 -->
        <div
            class="user-list unified-cursor-default unified-text-select unifined-border-radius flex unified-flex-align unified-flex-space-between">
            <el-avatar :size="55" src=""></el-avatar>

            <div class="user-list-info">
                <div class="info flex unified-flex-center">
                    <p class="username">请先选择测评人员</p>
                    <p class="duration"></p>
                </div>

            </div>

            <el-button icon="el-icon-arrow-right">选择人员</el-button>


        </div>

        <!-- 视频框 -->

        <div class="review flex">


            <div class="video unifined-media-border unifined-border-radius">

                <!-- 播放按钮 -->
                <div class="video-upload-icon ">
                    <span class="el-icon-video-camera"></span>
                </div>
                <!-- 上传提示 -->
                <div class="video-upload-tips"></div>

            </div>

            <div class="form unifined-border-radius">

                <el-form ref="form" :model="form" label-width="120px" label-position="left">

                    <el-form-item label="测评标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>

                    <el-form-item label="测评规格">
                        <el-select v-model="form.specs" placeholder="请选择商品规格">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="评分">
                        <el-select v-model="form.stars" placeholder="请选择测评打分">
                            <el-option label="1分" value="1"></el-option>
                            <el-option label="2分" value="2"></el-option>
                            <el-option label="3分" value="3"></el-option>
                            <el-option label="4分" value="4"></el-option>
                            <el-option label="5分" value="5"></el-option>
                            <el-option label="6分" value="6"></el-option>
                            <el-option label="7分" value="7"></el-option>
                            <el-option label="8分" value="8"></el-option>
                            <el-option label="9分" value="9"></el-option>
                             <el-option label="10分" value="10"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="测评时间">
                        <el-date-picker v-model="form.reviewTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="测评报告">
                        <el-input type="textarea" v-model="form.report"></el-input>
                    </el-form-item>

                    <el-form-item label="补充说明">
                        <el-input type="textarea" v-model="form.comment"></el-input>
                    </el-form-item>
                </el-form>


            </div>


        </div>





        <!-- 测评标题 -->

        <!-- 测评规格 -->

        <!-- 测评打分 -->

        <!-- 测评说明 -->


    </div>
</template>

<script>
    export default {
        props: {
            leftWidth: {
                type: Number,
                default: 4
            },
            display: {
                type: Boolean,
                default: false
            },
            star: {
                type: Number,
                default: 4
            }
        },
        data() {

            return {
                // 最大评分星数
                star_max: 5,
                form: {
                    title: '',   // 测评标题
                    stars: '', // 打分
                    specs: '',  // 规格
                    date2: '',  // 测评
                    reviewTime: null,    // 测评时间
                    report: [],           // 测评报告
                    comment: '',       // 补充说明
                    status: 0            // 测评状态
                }
            }
        },
        methods: {
            clickAdd() {
                this.display = !this.display
            },
            // 点击了星星
            clickStar(star) {
                this.$emit('starChange', (star + 1))
            }
        },
        computed: {
            // 根据星星等级,返回对应的文本
            starTips() {
                // 获取VUEX内的评价星级文本数组
                let starArray = this.$store.state.GoodsConfig.review_star_tips
                return starArray[(this.star - 1)]
            }
        }
    }
</script>

<style scoped="scoped">
    .user-list {
        height: 95px;
        background-color: rgba(243, 245, 250);
        padding: 0px 15px;
        padding-right: 25px;
    }

    .user-list-info {
        /* display: inline-block; */
        flex: 1;
        height: 100%;
    }

    .info {
        width: 160px;
        height: 100%;
        margin-left: 20px;
        flex-direction: column;
    }

    .username {
        font-size: 16px;
        margin-top: -3px;
    }

    .duration {
        color: #555555;
        margin-top: 6px;
    }

    .review {
        margin-top: 20px;
    }

    .video {
        width: 300px;
        height: 480px;
        position: relative;
        margin-right: 20px;
        box-sizing: border-box;
    }

    .form {
        flex: 1;
        /* background-color: rgba(243, 245, 250); */
        /* height: 480px; */
    }

    .video-upload-tips,
    .video-upload-icon {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .video-upload-icon {
        width: 60px;
        height: 60px;
        top: 30%;
        line-height: 60px;
        text-align: center;
        font-size: 40px;
        color: #2C3E50;
        border: 3px solid #2C3E50;
        border-radius: 50%;

    }

    .video-upload-tips {
        width: 240px;
        height: 160px;
        top: calc(30% + 90px);
        background-color: #0E60F7;
    }
</style>
